﻿@model Mangdot.Webchat.Models.CardsModel[]
@{
    ViewBag.Title = "贺卡";
}

<div class="right_col" role="main" id="vue_data">
    <div class="row" style="margin-right:-5px !important;">
        <button type="button" class="btn btn-success pull-right" v-on:click="publish">发布</button>
        <button type="button" class="btn btn-danger pull-right" v-on:click="create">新建</button>
    </div>

    @foreach (var item in Model)
    {
        <div class="col-md-55">
            <div class="thumbnail">
                <div class="image view view-first">
                    <img style="width: 100%; display: block;" src="@item.Img" alt="image">
                    <div class="mask">
                        <p>@item.Title</p>
                        <div class="tools tools-bottom">
                            <a title="预览" href="@item.VisitUrl"><i class="fa fa-link"></i></a>
                            <a title="编辑" href="javascript:Edit('@item.Id')"><i class="fa fa-pencil"></i></a>
                            <a title="发布" href="javascript:SingnalPublish('@item.Id')"><i class="fa fa-cloud"></i></a>
                        </div>
                    </div>
                </div>
                <div class="caption">
                    <p>@item.Title</p>
                </div>
            </div>
        </div>
    }

    <div class="modal fade templateModel" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">×</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">模板处理</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>所属模板</label>
                        <select class="form-control" v-model="Cards.TemplateId">
                            <option value="-1">请选择</option>
                            <option v-for="item in TemplateList" v-bind:value="item.Id">{{item.Name}}</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label>名称</label>
                        <input type="text" class="form-control" v-model="Cards.Title" />
                    </div>
                    <div class="form-group">
                        <label>滚动字幕</label>
                        <textarea class="form-control" v-model="Cards.Content"></textarea>
                    </div>

                    <div class="form-group">
                        <label>背景音乐</label>
                        <input type="text" class="form-control" v-model="Cards.Audio" />
                    </div>

                    <div class="form-group">
                        <label>背景图</label>
                        <input type="text" class="form-control" v-model="Cards.Img" />
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" v-on:click="save">保存</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade tipModel" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content  alert alert-danger text-center">
                <h4>发布成功！</h4>
            </div>
        </div>
    </div>

</div>

@section scripts{
    <script>
        var Cards = {
            Id: 0,
            TemplateId: -1,
            Title: "",
            Content: "",
            Audio: "",
            Img: "",
        };


        $(function () {

            $.post('/admin/GetTemplateList', {}, function (rep) {
                var vm = new Vue({
                    el: "#vue_data",
                    data: {
                        TemplateList: rep,
                        Cards: Cards
                    },
                    methods: {
                        save: function (e) {
                            Save(this.Template);
                        },
                        create: function (e) {
                            Cards.Id = 0;
                            Cards.TemplateId = -1;
                            Cards.Title = "";
                            Cards.Content = "";
                            Cards.Audio = "";
                            Cards.Img = ""
                            openModel()
                        },
                        publish:function (e) {
                            allPublish();
                        }
                    }
                });
            });


        })

        function Edit(id) {

            $.post('/admin/getcard', { id: id }, function (rep) {
                Cards.Id = id;
                Cards.TemplateId = rep.TemplateId;
                Cards.Title = rep.Title;
                Cards.Content = rep.Content;
                Cards.Audio = rep.Audio;
                Cards.Img = rep.Img;
            })
            openModel();
        }

        function Save(obj) {
            $.post('/admin/savecard', Cards, function (rep) {
                if (rep) {
                    closeModel();
                    showTip('保存成功！');
                    window.history.go(0);
                } else {
                    showTip('保存失败！')
                }
            })
        }

        function openModel() {
            $(".templateModel").modal('show');
        }

        function closeModel() {

            $(".templateModel").modal('hide');
        }

        function showTip(msg) {
            $(".tipModel h4").html(msg);
            $(".tipModel").modal('show');
            setTimeout(function () { $(".tipModel").modal('hide'); }, 2000);
        }

        function SingnalPublish(id) {
            $.post('/admin/Publish', { id: id }, function (rep) {
                if (rep) {
                    showTip('发布成功');
                } else {
                    showTip('发布失败');
                }
            })
        }

        function allPublish() {
            $.post('/admin/PublishHome', {}, function (rep) {
                if (rep) {
                    showTip('发布成功');
                } else {
                    showTip('发布失败');
                }
            })
        }
    </script>
}